<script setup>
import { ref , onMounted } from 'vue'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import {Vector as VectorLayer} from 'ol/layer'
import XYZ from 'ol/source/XYZ'
import { Circle } from "ol/style";
import { Fill, Stroke, Style } from "ol/style";
import { fromLonLat, Projection } from "ol/proj";
import VectorSource from 'ol/source/Vector';
import GeoJSON from "ol/format/GeoJSON";

const map = ref(null)

const getJson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          87.16552734375,
          39.470125122358176
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            79.16748046874999,
            37.61423141542417
          ],
          [
            81.27685546875,
            42.00032514831621
          ],
          [
            84.111328125,
            41.52502957323801
          ],
          [
            84.66064453125,
            43.229195113965005
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              81.71630859375,
              40.49709237269567
            ],
            [
              82.0458984375,
              37.21283151445594
            ],
            [
              86.220703125,
              36.59788913307022
            ],
            [
              86.06689453125,
              41.04621681452063
            ],
            [
              81.71630859375,
              40.49709237269567
            ]
          ]
        ]
      }
    }
  ]
};

const image = new Circle({
  radius: 5,
  fill: null,
  stroke: new Stroke({ color: 'red', width: 1 })
})

const  styles = {
  'Point': [
    new Style({
      //点样式
      image: image
    })
  ],
  'LineString': [
    new Style({
      stroke: new Stroke({
        //线的边界样式
        color: 'green',
        width: 1
      })
    })
  ],
  'MultiLineString': [
    new Style({
      stroke: new Stroke({
        //多线的边界样式
        color: 'green',
        width: 1
      })
    })
  ],
  'MultiPoint': [
    new Style({
      //多点的点样式
      image: image
    })
  ],
  'MultiPolygon': [
    new Style({
      stroke: new Stroke({
        //多区的边界样式
        color: 'yellow',
        width: 1
      }),
      fill: new Fill({
        //多区的填充样式
        color: 'rgba(255, 255, 0, 0.1)'
      })
    })
  ],
  'Polygon': [
    new Style({
      stroke: new Stroke({
        //区的边界样式
        color: 'blue',
        lineDash: [4],
        width: 3
      }),
      fill: new Fill({
        //区的填充样式
        color: 'rgba(0, 0, 255, 0.1)'
      })
    })
  ],
  'GeometryCollection': [
    new Style({
      stroke: new Stroke({
        //集合要素的边界样式
        color: 'magenta',
        width: 2
      }),
      fill: new Fill({
        //集合要素的填充样式
        color: 'magenta'
      }),
      image: new Circle({
        //集合要素的点样式
        radius: 10,
        fill: null,
        stroke: new Stroke({
          color: 'magenta'
        })
      })
    })
  ],
  'Circle': [
    new Style({
      stroke: new Stroke({
        //圆的边界样式
        color: 'red',
        width: 2
      }),
      fill: new Fill({
        //圆的填充样式
        color: 'rgba(255,0,0,0.2)'
      })
    })
  ]
};

const getStyleFunction = (feature) => {
  return styles[feature.getGeometry().getType()];
}

const initMap = () => {
  const projection = new Projection({
    code: 'EPSG:3857', // 投影编号，转为平面坐标
    units: 'degrees',
  })

  const geoJSON = new GeoJSON()
  const features = geoJSON.readFeatures(getJson, {
    featureProjection: projection,
  });
  // 设置数据源
  const vectorSource = new VectorSource({
    features: features,
  })

  // vectorSource.addFeatures(features)

  //构建矢量图层
  const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: getStyleFunction,
  })

  map.value = new Map({
    target:'map',
    layers: [
      new TileLayer({
        source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
        zIndex: 0
      }),
      vectorLayer
    ],
    view: new View({
      // 经纬度转换
      center: fromLonLat([87.16552734375, 39.470125122358176]),
      zoom: 4,
      projection: "EPSG:3857", //指定投影
    })

  })
}

onMounted(initMap)
</script>


<template>
  <div id="map">
  </div>
</template>


<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>